<template>
    <div>

      <div v-for='v in list' :key="v.id" style="margin-top:20px;display:flex" @click.native.stop class="listt">
          <el-checkbox :value ='v.seleted' :true-label='1' :false-label='2' size='medium'  @change="changeBox($event,v)">
           
        </el-checkbox>
         <div class="item">
                <div class="left">
                    <img :src="v.img" alt="">
                </div>
                <div class="right" >
                    <div>{{v.title}}</div>
                      <div style="margin:10px 0">价格:
                    <span :class="{shanchu:$store.state.user.zhekou}">{{v.price}}</span>
                    <span style="color:red" v-if='$store.state.user.zhekou'> 会员: {{v.huiyuanPrice}}</span>
                  <div>库存:{{v.kucun}}</div>
                </div>
             
                      <el-input-number @change="change($event,v)"  v-model="v.count" :min="1" :max="v.kucun" label="描述文字" size='small'></el-input-number>
                      <div>
                        <el-button type="text" style="color:red" @click='cartDelete(v.id)'>删除</el-button>
                      </div>
                </div>
              
            </div>
      </div>
      <img src='https://jkwedu.net/images/empty/cart.png'   v-if='list.length==0' @click='go'/>
      <div class="bottom">
        <span style="margin-right:20px">共{{sum}}件</span>
        <span>总价:{{totalPrice}}</span>
        <el-button type="primary" size="small" @click='goOrder' style="margin-left: 20px;">去结算</el-button>
      </div>
        <div style='font-size:30px;margin-top:20px'>  推荐产品</div>
        <div class="list" >
            <div v-for="v in prolist.slice(0,4)" :key="v.id" >
             <div @click="goDetail(v.id)">
                <img :src="v.img" alt="" style="width:100%;height:200px;border-radius:10px">
                   <div>标题:{{v.title}}</div>
                <div>价格:
                    <span :class="{shanchu:$store.state.user.zhekou}">{{v.price}}</span>
                    <span style="color:red" v-if='$store.state.user.zhekou'> 会员: {{($store.state.user.zhekou*v.price*0.1).toFixed(2)}}</span>
                  
                </div>
                <div>分类:{{v.typeName}}</div>
                <div>销量:{{v.xiaoliang}}</div>
                <div>库存:{{v.kucun}}</div>
                <div>到期时间:{{v.daoqiTime}}</div>
             </div>
            </div>
        </div>
    </div>
</template>

<script>
import api from "@/api/index"
    export default {
        data() {
            return {
                list: [],
                prolist: [],
            }
        },
        computed: {
            sum() {
                let t=0
                 this.list.forEach(v=>{
                    if(v.seleted==1){
                        t+=v.count
                    }
                 })
                 return t
            },
              totalPrice() {
                let t=0
                 this.list.forEach(v=>{
                    if(v.seleted==1){
                        t+=v.count*(v.huiyuanPrice||v.price)
                    }
                 })
                 return t.toFixed(2)
            },
            
        },
        mounted () {
            this.getProList();
            this.getList();
        },
        methods: {
            go(){
                this.$router.push("/")
            },
            goOrder(){
                if(this.sum==0){
                    return this.$message({
          message: '请先选择商品',
          type: 'warning'
        });
                }
                this.$router.push("/order")
            },
            cartDelete(id){
                api.deleteCart(id).then(res=>{
                      if(res.code==200){
                        this.getList()
                    }
                })
                console.log(id);
            },
            change(e,v){
                console.log(e,v.id);
                  api.updateCart({
                    id:v.id,
                    count:e
                }).then(res=>{
                    if(res.code==200){
                        this.getList()
                    }
                    console.log(res);
                })
            },
            changeBox(e,v){
                api.updateCart({
                    id:v.id,
                    seleted:e
                }).then(res=>{
                    if(res.code==200){
                        this.getList()
                    }
                    console.log(res);
                })
               console.log(e,v.id);
             
            },
            getList() {
                api.getCartById({userId:this.$store.state.user.id}).then(res=>{
                    this.list=res.data
                    console.log(111,res);
                    if(this.$store.state.user.zhekou){
                        this.list.forEach(v=>{
                            v.huiyuanPrice=(this.$store.state.user.zhekou*v.price*0.1).toFixed(2)
                        })
                    }
                })
            },
             getProList(){
            api.getproductList({typeId:this.curId,status:1,page:1,size:99}).then(res=>{
                this.prolist=res.data.list
                console.log(222,res);
            })
        }
        },
    }
</script>

<style lang="scss" scoped>
.bottom{
    margin-top: 20px;
    span{
        display: inline-block;
        // height: 40px;
        // line-height: 40px;
        font-size: 20px;
    }
}
.listt{
    background-color: white;
width: 100%;
padding: 20px;
}
.item{


    display: flex;
    .left{
        margin-left: 20px;
        margin-right: 20px;
        img{
            width: 100px;
            border-radius: 10px;
            height: 100px;
        }
    }
}
.el-radio{
    width: 100%;
    display: flex;
}
.shanchu{
      text-decoration: line-through;
}
.list{
    *{
              box-sizing: border-box !important;
    }
    margin-top: 20px;
    display: flex;flex-wrap: wrap;
    >div{
  
        padding: 20px;
        width: 25%;
        >div{
            &:hover{
                background-color: #eee;
            }
            cursor: pointer;
            padding: 20px;
            border: 1px solid gray;
            border-radius: 20px;
            >div{
                font-size: 16px;
                line-height: 26px;
                height: 26px;
            }
        }
    }
}
</style>